<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阴阳师</title>
  <style>
    *{
      margin: 0;
    }
    .head{
      display: flex;
      width: 100%;
      position: fixed;
      top: 0%;
      z-index: 5;
      justify-content: space-between;
      align-items: center;
      background-color:white;
      height: 55px;
      border-bottom: 2px solid gainsboro;
    }
    .smbox1{
      width:610px;
      height: 55px;
    }
    .smbox1_item,.smbox2_item
    {
      display: inline-block;
      color:white;
    }
    .smbox1_item{
      width: 200px;
      line-height: 55px;
      text-align: center;
      background-color: #CF1132;
    }
    .smbox2_item{
      width: 400px;
      height: 55px;
      vertical-align:bottom;
    }
    .wy_logo{
      width: 250px;
      height: 50px;
     
    }
    .tbtn{
      width:250px;
      height: 55px;
      border-left: 2px solid gainsboro;
      line-height: 55px;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.5s,border 0.1s;
    }
    .tbtn:hover{
      background-color: silver;
      border-bottom: 1px solid red;
    }
    .nav{
      height: 60px;
      display: flex;
      margin-top: 55px;
      justify-content: center;
      align-items: center;
      background-color: #212121;
    }
    .list1 li{
      display: inline-block;
      width:100px;
      height: 55px;
      list-style: none;
      line-height: 60px;
      text-align: center;
      
    }
    .list1 li a{
      color: white;
      text-decoration:none;
    }
    .list1 li:hover{
      background-color: #eebb54;
    }
    .bg{
      margin: 0 auto;
      background-image: url(./pic/6_428_6f7ab695-3407-4941-b59b-440044e22968_9cf89f4.jpg);
      background-repeat: no-repeat;
      width: 100%;
      height: 1029px;
      position: relative;
      background-size: cover;
    }
    .rightbox{
      position:fixed;
      display: flex;
      top:35%;
      width: 111px;
      height: 405px;
      background-image: url(./pic/6_428_ca903f0f-1d43-4a77-b0b4-6af17a518046_9da2767.png);
      flex-direction: column;
      align-items: center;
      justify-content:center;
      z-index:2;
      
    }
    .rightbox>div{
      width: 100px;
      height: 110px;
      text-align: center;
    }
    .rightyysbox{
      position:fixed;
      top:12%;
      left: 1%;
      width: 77px;
      height: 253px;
      background-image: url(./pic/6_428_e0f9bbaa-4aef-475e-be87-013acf601c14_80ffa63.png);
      z-index:2;
    }
    .leftbox1{
      position: fixed;
      top: 5%;
      right: 0%;
      width: 467px;
      height: 1000px;
     background-image: url(./pic/6_428_d28eb8fa-4d75-4718-99f1-999b6f31c012_891d438.png);
    background-repeat: no-repeat;
    background-position: 0px -30px;
    z-index:2;
    
    }
    .leftitem1,.leftitem2,.leftitem3,.leftitem4{
      position:relative;
      width: 147px;
      height: 144px;
      margin: 10px;
      
    }
    .leftitem1{
      top:50px;
      left: 250px;
      background-image: url(pic/6_428_2a253cb3-4576-46db-9670-3aff319c0af1_62dc0a4.png);
      background-repeat: no-repeat;
      background-size: cover;
      transition:background-image 0.3s;
    }
  
    .leftitem2{
      top:100px;
      left: 300px;
      background-image: url(pic/6_428_614e2ca7-bb79-4f71-b2f9-e7d626c60d90_89db1d1.png);
      background-repeat: no-repeat;
      background-size: cover;
      transition:background-image 0.3s;
    }
    .leftitem3{
      top:150px;
      left:280px;
      background-image: url(pic/6_428_bdf185aa-75e9-453c-b774-68ca00dafa72_85d09e9.png);
      background-repeat: no-repeat;
      background-size: cover;
      transition:background-image 0.3s;
    }
    .leftitem4{
      top:180px;
      left:200px;
      background-image: url(pic/6_428_7411ca7f-744c-4266-b6fb-6722c1f1a4bc_0fd7e2c.png);
      background-repeat: no-repeat;
      background-size: cover;
      transition:background-image 0.3s;

    }
    .leftitem1:hover{
      background-image: url(pic/6_428_90e4fe47-e65f-4c75-97d5-d4815300130e_eeffde9.png);
    }
    .leftitem2:hover{
      background-image: url(pic/6_428_0905e992-2b79-44db-9272-30c861acc021_ee699ad.png);
    }
    .leftitem3:hover{
      background-image: url(pic/6_428_578c92e0-dd08-4436-a42c-a22cb067765e_eaf7295.png);
    }
    .leftitem4:hover{
      background-image: url(pic/6_428_1713ce9c-dc28-41bb-b732-dd3482bca477_0a5f49f.png);
    }
    .bg2{
      width: 100%;
      height: 1028px;
      background-image: url(pic/6_428_a081cc5d-1e97-4281-950a-09599e110270_b677c2c.jpg);
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;   
      position: relative;
    }
    .bg2_box{
      width: 1920px;
      height: 1028px;
      background-image: url(pic/6_428_52e8602d-ae0e-41ca-a157-3cc5ec4ef936_932f655.png);
      position: relative;
      z-index:0;
    }
    .bg2_box_item{
      width: 688px;
      height: 365px;
      background-image: url(pic/6_428_1dd02f55-33c6-444f-814c-f245491e7ef3_e908120.png);
      position:absolute;
      left:600px;
      bottom:232px;
      z-index:1;
    }
    .bg_list{
     position: relative;
    }
    .bg_list li{
      position: relative;
      list-style: none;
      display: inline-block;
      width: 200px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: #8F5326;
      font-weight: 600;
      left: 600px;
      top: 850px;
      transition:background-color 0.3s ;
    }
    .bg_list li a{
      text-decoration: none;
      color: white;
    }
    .bg_list li:hover{
      background-color:#7F3228;
    }
    .jz{
      width: 179px;
      height: 180px;
      position: relative;
      left:380px;
      top:650px;
      cursor: pointer;
    }
    .jz img{
      transition: width 0.4s;
    }
    .jz img:hover{
      width: 120% ;
    }
    .bg3{
      width: 100%;
      height: 1028px;
      background-image: url(pic/6_428_a081cc5d-1e97-4281-950a-09599e110270_b677c2c.jpg);
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .bg3_boximage1{
      width: 1500px;
      height:900px;
    }
    .bg3_listimg{
      display: flex;
      flex-direction: row;
      justify-content: center;
      
    }
    .bg3_listimg img{
      width:303px;
      height:500px;
      margin-top: -90px;
      margin-left: -60px;
    }
    .bg4{
      width: 100%;
      height: 1028px;
      background-image: url(pic/6_428_a081cc5d-1e97-4281-950a-09599e110270_b677c2c.jpg);
      background-size: cover;
      position: relative;
      overflow: hidden;
    }
    .qm{
      position:absolute;
      width: 694px;
      height: 745px;
      left: 60%;
      top: 28%;
      text-align: center;
    }
    .sl{
      position:absolute;
      width: 532px;
      height: 550px;
      left: 55%;
      top: 48%;
      z-index: 1;
    }
    .ck{
      position:relative;
      text-align: center;
      width: 1100px;
      height: 737px;
      left: 8%;
      top: 20%;
      z-index: 0;
      
    }
  </style>
</head>
<body>
  
  <div class="head">
    <div class="smbox1">
      <div class="smbox1_item">游戏目录</div>
      <div class="smbox2_item"><img src="pic/615280388a8ae942358bdb6cdzXwSlgR03.jpg" width="100%" alt=""></div>
    </div>
    <div class="wy_logo">
      <img src="pic/wy_logo.png"  alt="">
    </div>
    <div class="tbtn">
      <span>Test
      </span>
    </div>
  </div>

  <div class="nav">
    <ul class="list1">
      <li><a href="">官网首页</a></li>
      <li><a href="">新闻资讯</a></li>
      <li><a href="">式神录式神录</a></li>
      <li><a href="">游戏功率</a></li>
      <li><a href="">大社区</a></li>
      <li><a href="">泛娱乐</a></li>
      <li><a href="">视听中心</a></li>
      <li><a href="">主体站</a></li>
      <li><a href="">周边商城</a></li>
      <li><a href="">藏宝阁</a></li>
      <li><a href="">官方渠道</a></li>
      <li><a href="">IP新游预约</a></li>
      <li><a href="">兑换福利</a></li>
      <li><a href="">系统转移</a></li>
      <li><a href="">搜索</a></li>
    </ul>
  </div>

  <!-- 第一张背景图 -->
  <div class="bg" id="st">
  </div>

  <!-- 右边下载游戏box -->
  <div class="rightyysbox">
  </div>
  <div class="rightbox">
    <div><img src="pic/57bd6bb096dee4901dea0171sOSFCYQR.png" width="100%" alt=""></div>
    <div><img src="pic/6_428_db9478d5-33d0-4652-ab01-59945cf08d9d_706f46e.png" width="100%" alt=""></div>
    <div><img src="pic/6_428_726a36a8-4f4f-422a-a003-fb2b16be9bf0_334d56f.png" width="90%" alt=""></div>
  </div>

  <!-- 左边nav -->
  <div class="leftbox1">
    <a href="#st"><div class="leftitem1"></div></a>
    <a href="#sec"><div class="leftitem2"></div></a>
    <a href="#thd"><div class="leftitem3"></div></a>
    <a href="#th"><div class="leftitem4"></div></a>
  </div>

  <!-- 第二张背景图片 -->
  <div class="bg2" id="sec">
    <div class="bg2_box">
      <div class="bg2_box_item"></div>
      <div class="bg_list">
        <ul>
          <li><a href="#">新式神SSR食灵</a> </li>
          <li><a href="#">新式神SSR饭笥</a></li>
          <li><a href="#">真味如初·召上</a></li>
        </ul>
      </div>
      <div class="jz">
        <img src="pic/6_428_3367d19d-cbe4-456f-867f-e49de1413ac2_8b9adde.png" alt="" width="100%">
      </div>
    </div>
  </div>


  <!-- 第三张背景 -->
  <div class="bg3">
    <div class="bg3_boximage1" id="thd">
      <img src="pic/6_428_7bb0e3f2-99a8-4480-be3c-fe9dd9f68cb7_e583859.png" alt="" width="90%">
      <div class="bg3_listimg">
        <a href="#"><img src="pic/6_427_95213831-719c-48ea-bb06-d48a40325bf1_b8ea1f2.png" width="75%" alt=""></a>
        <a href="#"><img src="pic/6_428_21cc07dc-c574-4774-a11e-767ae73807be_3f0386a.png" width="75%"alt=""></a>
        <a href="#"><img src="pic/6_428_8e14a190-dd42-44a9-af12-ef534c6e9a92_e8f5242.png" width="75%" alt=""></a>
        <a href="#"><img src="pic/6_428_2ddc6359-62c2-4d28-b83b-f6b1cb976c99_a772683.png" width="75%" alt=""></a>
      </div>
    </div>
  </div>

  <div class="bg4" id="th">
    <div class="qm">
      <img src="pic/6_428_6cfd3df0-9a01-4a77-8d10-dbf592cb2419_d2176d1.png" width="80%"  alt="">
    </div>
    <div class="sl">
      <img src="pic/6_428_79cbae77-95ee-4676-a29d-5ac46b5e7fd7_3a259a2.png" width="80%" alt="">
    </div>
    <div class="ck">
      <img src="pic/6_428_30c2000e-5388-44be-b8f0-30fefb789b3a_ec3cad7.png" alt="" width="90%">
    </div>
  </div>
</body>
</html>
